<template>
	<div class="jl-row1">
		<div class="wp">
			<div class="jl-about1">
				<div class="jl-tit1">
					<div class="tit">作者创作中心</div>
				</div>
				<ul class="jl-tab1">
					<li v-for="(item, index) in options.list1" :key="index"
						:class="options.actNum == index ? 'on' : ''">
						<NuxtLink :to="item.link" class="btn">{{ item.tit }}</NuxtLink>
					</li>
				</ul>
				<div class="m-withdrawall">
					<div class="m-incomel jl-income">
						<div class="tit">资产收益金额</div>
						<NuxtLink to="/withdrawalRecord" class="log"><i></i>提现记录</NuxtLink>
						<div class="balance">
							可用余额：<span class="num">{{ totalObj.unlockEarnings }}<em class="em">USD</em></span>
							<div class="btn">余额提现</div>
						</div>
						<div class="total">
							<div class="con">
								<div class="num">{{ totalObj.totalEarnings }}</div>
								<div class="tt">分成总额（USD）</div>
							</div>
							<div class="con">
								<div class="num">102.09</div>
								<div class="tt">昨日分成总额（USD）</div>
							</div>
							<div class="con">
								<div class="num">{{ totalObj.sellTotal }}</div>
								<div class="tt">销售总额（USD）</div>
							</div>
							<div class="con">
								<div class="num">{{ totalObj.sellAmount }}</div>
								<div class="tt">销售总量（份）</div>
							</div>
						</div>
					</div>
					<div class="record">
						<div class="ll">作品收益明细</div>
						<div class="m-selectl">
							<a-select ref="select" v-model:value="options.TimeType" style="width: 200px" @change="setTimeout()">
								<a-select-option value="7">近7天</a-select-option>
								<a-select-option value="15">近半个月</a-select-option>
								<a-select-option value="30">近一个月</a-select-option>
								<a-select-option value="90">近三个月</a-select-option>
							</a-select>
						</div>
					</div>
					<div class="m-tablel l2">
						<a-table :dataSource="data.dataSource" :columns="data.columns" :pagination="false"
							:scroll="{ x: 1400 }">
							<template #bodyCell="{ column, record }">
								<template v-if="column.key === 'state'">
									<div :class="record.color">{{ record.state }}<i class="icon"
											v-if="record.color == 'red'"></i></div>
								</template>
								<template v-if="column.key === 'createdAt'">
                   {{ timeFormat(record.book?.createdAt,0) }}
                  </template>
                  <template v-if="column.key === 'books'">
                   {{ record.book?.title}}
                  </template>
							</template>
						</a-table>
					</div>
					<div class="m-pages">
						<a-pagination v-model:current="current1" show-quick-jumper :total="total" @change="onChange" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import request from '~/services/request'
import { message } from 'ant-design-vue';
import { RouterLink, RouterView, useRouter } from 'vue-router'
const router = useRouter()
const current1 = ref(1);
const totalObj = ref({});
function timeFormat(time, type) {
	if(time){
    time=new Date(time)
  }
	// 获取当前日期
	const now = new Date();
	// 近七天
	const last7Days = new Date(now.getTime() - (7 * 24 * 60 * 60 * 1000));

	// 近半个月
	const last15Days = new Date(now.getTime() - (15 * 24 * 60 * 60 * 1000));

	// 近一个月
	const last30Days = new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000));

	// 近三个月
	const last90Days = new Date(now.getTime() - (90 * 24 * 60 * 60 * 1000));

	// 使用Intl.DateTimeFormat格式化日期
	const dateFormatter = new Intl.DateTimeFormat('en-ca', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		dataStyle: 'short',
	});
	const dateFormatterLong = new Intl.DateTimeFormat('zh-CN', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		dataStyle: 'short',
		hour: '2-digit',
		minute: '2-digit',
		second: '2-digit',
	});

	// 格式化日期
	const formattedLast7Days = dateFormatterLong.format(last7Days).replace(/\//g, '-');
	const formattedLast15Days = dateFormatterLong.format(last15Days).replace(/\//g, '-');
	const formattedLast30Days = dateFormatterLong.format(last30Days).replace(/\//g, '-');
	const formattedLast90Days = dateFormatterLong.format(last90Days).replace(/\//g, '-');
	if (type == 0) {
		return dateFormatterLong.format(time).replace(/\//g, '-')
	} else if (type == 1) {
		return dateFormatterLong.format().replace(/\//g, '-')
	} else if (type == 7) {
		return formattedLast7Days
	} else if (type == 15) {
		return formattedLast15Days
	} else if (type == 30) {
		return formattedLast30Days
	} else if (type == 90) {
		return formattedLast90Days
	}
}
const options = reactive({
	actNum: 1,
	list1: [{
		tit: '我的作品',
		link: '/myWorks'
	},
	{
		tit: '作品收益',
		link: '/incomeFromWorks'
	},
	{
		tit: '帮助中心',
		link: '/helpCenter'
	},
	],
	TimeType: '7',
});
const data = reactive({
	dataSource: [],
	columns: [{
		title: '时间',
		dataIndex: 'createdAt',
		key: 'createdAt',
	},
	{
		title: '书籍名称',
		dataIndex: 'books',
		key: 'books',
	},
	{
      title:'NFT等级',
      dataIndex: 'level',
      key: 'level',
    },
    {
      title:'售价(USD)',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title:'金浆果持有收益(USD)',
      dataIndex: 'goldHoldEarnings',
      key: 'goldHoldEarnings',
    },
    {
      title:'银浆果持有收益(USD)',
      dataIndex: 'silverHoldEarnings',
      key: 'silverHoldEarnings',
    },
    {
      title:'铜浆果持有收益(USD)',
      dataIndex: 'copperHoldEarnings',
      key: 'copperHoldEarnings',
    },
    {
      title:'蓝莓持有收益(USD)',
      dataIndex: 'blueHoldEarnings',
      key: 'blueHoldEarnings',
    },
	],
});
// 页码
const total = ref(0)
const formState = reactive({
	skip: (current1.value - 1) * 10,
	take: 10,
	sort: 'updatedAt_desc',
	endTime:timeFormat('',1),
	startTime:timeFormat('',options.TimeType),
});
const onChange = (page) => {
	current1.value = page
	formState.skip = (current1.value - 1) * 10
	getList()
};
function setTimeout(){
  formState.startTime=timeFormat('',options.TimeType)
  getList()
}
function getList() {
	request.get_earnings_book(formState).then((res) => {
		data.dataSource = res.results
		total.value = res.total
	})
}
onMounted(() => {
	getList()
	request.get_bookTotal({}).then((res) => {
		totalObj.value = res
	})
})
</script>

<style></style>